<template>
  <div>
    <!-- 卡片 -->
<el-card class="box-card">
    <!-- 顶部提示 -->
    <el-alert
    title="添加商品信息"
    type="info"
    center
    :closable="false"
    show-icon>
  </el-alert>
  <!-- 步骤条 -->
<el-steps :active="active" finish-status="success">
  <el-step title="基本信息"></el-step>
  <el-step title="商品参数"></el-step>
  <el-step title="商品属性"></el-step>
  <el-step title="商品图片"></el-step>
  <el-step title="商品内容"></el-step>
  <el-step title="完成"></el-step>
</el-steps>

<!-- 左侧标签页 -->

<div class="addbox">
    <el-tabs tab-position="left" @tab-click="cut" :before-leave="beforeLeave">
    <el-tab-pane label="基本信息">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="商品分类" prop="goods_class">
            <el-cascader
         v-model="ruleForm.goods_class"
         :options="options"
         :props="props"
         @change="handleChange"></el-cascader>
          </el-form-item>
        

         <el-form-item label="商品名称" prop="goods_name">
         <el-input v-model="ruleForm.goods_name"></el-input>
        </el-form-item>

        <el-form-item label="商品价格" prop="goods_price">
         <el-input v-model="ruleForm.goods_price"></el-input>
        </el-form-item>

        <el-form-item label="商品重量" prop="goods_weight">
         <el-input v-model="ruleForm.goods_weight"></el-input>
        </el-form-item>

        <el-form-item label="商品数量" prop="goods_number">
         <el-input v-model="ruleForm.goods_number"></el-input>
        </el-form-item>
      
        <!-- 商品 -->
        </el-form>
  </el-tab-pane>
    <el-tab-pane label="商品参数">
      <!-- <el-form label-position="top" v-for="(item) in manyList" :key="item.attr_id">
        <el-form-item :label="item.attr_name">
    <el-checkbox-group v-model="item.checked" size="small">
      <el-checkbox v-for="(obj,index) in item.attr_vals" :key="index"  :label="obj" border></el-checkbox>
    </el-checkbox-group>
      </el-form-item>
      </el-form> -->
     <attrList :list="manyList"/>
    </el-tab-pane>
    <el-tab-pane label="商品属性">
      <attrList :list="onlyList"/>
      <!-- <el-form label-position="top" v-for="(item) in onlyList" :key="item.attr_id">
        <el-form-item :label="item.attr_name">
    <el-checkbox-group v-model="item.checked" size="small">
      <el-checkbox v-for="(obj,index) in item.attr_vals" :key="index"  :label="obj" border></el-checkbox>
    </el-checkbox-group>
      </el-form-item>
      </el-form> -->
    </el-tab-pane>
    <el-tab-pane label="商品图片">
      <!-- 图片上传 -->
      <el-upload
  class="upload-demo"
  action=""
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-success="handleSuccess"
  :file-list="fileList"
  :http-request="handleRequest"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
      <!--  -->
    </el-tab-pane>
    <el-tab-pane label="商品内容">
      <el-form ref="form" :model="form" label-width="80px">
         <el-form-item>
         <!-- 富文本编辑器 -->
         <quill-editor 
	   class="ql-editor"
	   v-model="content" 
	   ref="myQuillEditor" 
	   @blur="onEditorBlur($event)" 
	   @focus="onEditorFocus($event)"
	   @change="onEditorChange($event)">
	</quill-editor>
         </el-form-item>
      </el-form>
  <el-button type="primary" @click="acc">完成</el-button>
    </el-tab-pane>
  </el-tabs>
</div>


</el-card>
  </div>
</template>
<script>
import attrList from '@/components/attrList.vue';
import { add,getClass2,parameter,upload } from '@/utils/api'
export default {
  components:{attrList},
  name: 'Add',
  data () {
    return {
        active:0, //步骤条
        manyList:[], //动态参数
        onlyList:[], //静态属性
        ruleForm:{
            goods_name:'',//商品名称
            goods_price:'',//商品价格
            goods_weight:'',//商品重量
            goods_number:'',//商品数量
            goods_class:[], //商品分类
            pics:[], // 图片临时路径
        },
        claList:[], //商品分类数据
        status:true,
        form:{
          desc:'', //
        },
        options:[],
        props:{ value:'cat_id',label:'cat_name',children:'children' },
        rules: {
            goods_name: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
          ],
          goods_price:[
            { required: true, message: '请输入商品价格', trigger: 'blur' },
          ],
          goods_weight:[
            { required: true, message: '请输入商品重量', trigger: 'blur' },
          ],
          goods_number:[
            { required: true, message: '请输入商品数量', trigger: 'blur' },
          ],
          goods_class:[
            { required: true, message: '请选择商品分类', trigger: 'blur' },
          ],
        },
         
        fileList:[],//
        content:'', 
    }
  },
  methods: {
    beforeLeave(to,from){
      if(from == 0 && this.ruleForm.goods_class.length < 3){
         this.$message.error('请选择商品分类');
         return false
      }
    },
    handleChange(val){
        // console.log(val);   
    },

    cut(val){
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.active = Number(val.index)

          } else {
            this.$message.error('请完善商品信息！');
            return false;
          }
        });
    },

    acc(){ //完成
      this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.active = 6
            let params = {
              goods_name:this.ruleForm.goods_name,
              goods_cat:'1,2,3',
              goods_price:this.ruleForm.goods_price,
              goods_number:this.ruleForm.goods_number,
              goods_weight:this.ruleForm.goods_weight
            }
            add(params).then((res)=>{
              // console.log(res);
              if(res.meta.status == 201){
               this.$message({
               message: res.meta.msg,
               type: 'success'
             });
              }else{
                this.$message.error(res.meta.msg);
              }
              this.$router.back(-1)
            })
          } else {
            this.$message.error('请完善商品信息！');
            return false;
          }
        });
    },

    //封装请求
    Gets(val){
       let params = {
        id:this.ruleForm.goods_class[2],
        sel:val
       }
      parameter(params).then((res) => {
        // console.log(res);
       if(res.meta.status != 200) return  this.$message.error('商品参数请求失败')
       res.data.forEach(item=>{
        let attr = item.attr_vals.split(' ')
        item.attr_vals = attr
        item.checked = _.cloneDeep(attr)
       })
        this[val+'List'] = res.data
        // console.log(this.manyList);
      })
    },


  async  handleRequest(val){
      //val中存在请求参数file
      //  console.log(val.file);
       //创建表单对象
       let formData = new FormData()
       //元素结尾添加节点
       formData.append('file',val.file)
       //发送请求
      let {data} = await upload(formData).catch(err=>console.error(err))
      return data
    },

    //图片上传成功的回调函数
    handleSuccess(val){
      this.ruleForm.pics.push({pic:val.tmp_path})
    },
    
    handleRemove(file, fileList) {},
    handlePreview(file) {},


    //富文本编辑器事件
  onEditorBlur(){},
  onEditorFocus(){},
  onEditorChange(){
    console.log(this.content);
  },

  },
  created () {
    getClass2().then((res)=>{
      // console.log(res);
      this.options = res.data
    })
  },


  //监听属性
  watch:{
    active:{
       handler(val1,val2){
        if(val1 === 1 && this.manyList.length == 0){
          this.Gets('many')
        }else if (val1 === 2 && this.onlyList.length == 0){
          this.Gets('only')
        }
       },
       immediate:true
    }
  },
  mounted () {},
}
</script>
<style lang="scss" scoped>
  .el-steps{
    margin-top: 10px;
    .is-wait{
        font-size: 10px;
    }
  }
 ::v-deep .quill-editor{
  margin-left: -90px;
  margin-top: -20px;
 }
</style>
